<template>
  <n-card :title="title" size="small" class="receipt-container">
    <div id="receiptContent" ref="receiptContentRef" class="receipt-preview">
      <!-- 小票抬头 -->
      <div class="receipt-header">
        <h2 class="text-center">
          {{ storeInfo.name }}
        </h2>
      </div>
      <!-- 收货人信息 -->
      <div class="receipt-payment">
        <div class="payment-row">
          <span class="flex-2-left">订单号:</span>
          <span class="flex-2-right">{{ orderInfo.orderNum }}</span>
        </div>

        <div class="payment-row">
          <span class="flex-2-left">收件人:</span>
          <span class="flex-2-right">{{ deliveryOrder.userName }}</span>
        </div>
        <div class="payment-row">
          <span class="flex-2-left">收件电话:</span>
          <span class="flex-2-right">{{ deliveryOrder.userPhone }}</span>
        </div>
        <div class="payment-row">
          <span class="flex-2-left">配送地:</span>
          <span class="flex-2-right">{{ deliveryOrder.deliveryAddress }}</span>
        </div>
      </div>

      <!-- 商品列表 -->
      <n-divider />

      <div class="receipt-items">
        <div class="item-row header-row">
          <span class="item-name">商品名称</span>
          <span class="item-price">单价</span>
          <span class="item-quantity">数量</span>
          <span class="item-total">小计</span>
        </div>

        <div v-for="(item, index) in orderInfo.items" :key="index" class="item-row">
          <span class="item-name">{{ item.goodsName }}</span>
          <span class="item-price">{{ formatCurrency(item.receivableMoney) }}</span>
          <span class="item-quantity">{{ item.goodsNum }}</span>
          <span class="item-total">{{ formatCurrency(item.receivableMoney) }}</span>
        </div>
      </div>

      <n-divider />

      <!-- 总计 -->
      <div class="receipt-total">
        <div class="total-row">
          <span class="flex-2-left">商品总数:</span>
          <span class="flex-2-right">{{ orderInfo.items.length }}件</span>
        </div>

        <div class="total-row">
          <span class="flex-2-left">合计:</span>
          <span class="flex-2-right">{{ formatCurrency(orderInfo.receivedMoney) }}</span>
        </div>

        <div v-if="orderInfo.discount > 0" class="total-row">
          <span class="flex-2-left">优惠:</span>
          <span class="flex-2-right">-{{ formatCurrency(orderInfo.discount) }}</span>
        </div>

        <div class="total-row">
          <span class="flex-2-left">应收:</span>
          <span class="flex-2-right">{{ formatCurrency(netAmount) }}</span>
        </div>
      </div>

      <!-- 支付信息 -->
      <n-divider />

      <div class="receipt-payment">
        <div class="payment-row">
          <span class="flex-2-left">支付方式:</span>
          <span class="flex-2-right">{{ orderInfo.paymentMethod }}</span>
        </div>

        <div class="payment-row">
          <span class="flex-2-left">实收:</span>
          <span class="flex-2-right">{{ formatCurrency(orderInfo.discountMoney) }}</span>
        </div>
      </div>

      <!-- 页脚 -->
      <n-divider />

      <div class="receipt-footer">
        <p class="text-center">
          {{ footerMessage }}
        </p>
        <p class="text-center">
          {{ storeInfo.businessHours }}
        </p>
        <div v-if="showQRCode" class="qrcode-container">
          <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="支付二维码" class="qrcode">
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <template #footer>
      <n-space justify="end">
        <n-button type="primary" :loading="printing" @click="printReceipt">
          <template #icon />
          打印小票
        </n-button>
      </n-space>
    </template>
  </n-card>
</template>

<script setup>
import api from '@/api'
import { useMessage } from 'naive-ui'
import printJS from 'print-js'
import { ref, watch } from 'vue'

const props = defineProps({
  orderId: {
    type: String,
    default: '1943294746442469377',
  },
  footerMessage: {
    type: String,
    default: '谢谢惠顾，欢迎再次光临！',
  },
  printOptions: {
    type: Object,
    default: () => ({
      printable: 'receiptContent',
      type: 'html',
      targetStyles: '*',
      scanStyles: true,
    }),
  },
})
const message = useMessage()
const receiptContentRef = ref(null)
const printing = ref(false)
// 方法
function formatCurrency(value) {
  return `¥${Number(value).toFixed(1)}`
}

function printReceipt() {
  // --------------------------printJS打印-----------------------------------
  printing.value = true
  // emit('printStart')

  const printOptions = {
    ...props.printOptions,
    printable: 'receiptContent',
  }

  printJS(printOptions)

  printJS.onPrintDialogClose = () => {
    printing.value = false
    // emit('printEnd')
    message.success('打印完成')
  }
}
const storeInfo = ref({
  name: 'res.storeInfo.name',
  address: 'res.storeInfo.address',
  phone: 'res.storeInfo.phone',
})
const orderInfo = ref({
  items: [],
})
const payOrderList = ref({})
const deliveryOrder = ref({})
// 监听props变化
watch(() => props.orderId, (newItems) => {
  api.getOrderPrinterInfo(newItems).then((res) => {
    storeInfo.value = {
      name: 'res.storeInfo.name',
      address: 'res.storeInfo.address',
      phone: 'res.storeInfo.phone',
    }
    orderInfo.value = res.order
    payOrderList.value = res.payOrderList
    deliveryOrder.value = res.deliveryOrder
  })
}, { immediate: true })
</script>

<style scoped>
.receipt-container {
  max-width: 600px;
  margin: 0 auto;
}

.receipt-preview {
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  background-color: white;
  padding: 16px;
}

.text-center {
  text-align: center;
  margin: 4px 0;
}

.receipt-items {
  width: 100%;
}

.item-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

.header-row {
  font-weight: bold;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 4px;
}

.item-name {
  flex: 3;
}

.item-price,
.item-quantity,
.item-total {
  flex: 1.5;
  text-align: right;
  padding-left: 8px;
}

.flex-2-right {
  flex: 2;
  text-align: right;
  padding-left: 8px;
}

.flex-2-left {
  flex: 1;
  text-align: left;
  padding-left: 8px;
}

.receipt-total,
.receipt-payment {
  margin-top: 8px;
}

.total-row,
.payment-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

.receipt-footer {
  margin-top: 16px;
  font-size: 12px;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.qrcode {
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .receipt-container {
    width: 100%;
    max-width: 100%;
  }

  .receipt-preview {
    padding: 10px;
    font-size: 12px;
  }
}
</style>
